<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium订阅 - 声破天</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/premium.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <a href="landing.html">
                    <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="20" fill="#1DB954" />
                        <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                        <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                        <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                        <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                    </svg>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="following.html" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <div class="premium-hero">
                <div class="premium-hero-content">
                    <h1>升级到声破天 Premium</h1>
                    <p>畅享无广告音乐，离线收听，以及更高音质</p>
                </div>
            </div>

            <div class="content-container premium-container">
                <div class="premium-intro">
                    <h2>为什么选择 Premium?</h2>
                    <div class="premium-features">
                        <div class="premium-feature">
                            <i class="fas fa-ban"></i>
                            <div class="feature-text">
                                <h3>无广告干扰</h3>
                                <p>畅享无打断的音乐体验</p>
                            </div>
                        </div>
                        <div class="premium-feature">
                            <i class="fas fa-download"></i>
                            <div class="feature-text">
                                <h3>离线收听</h3>
                                <p>随时随地播放已下载的音乐</p>
                            </div>
                        </div>
                        <div class="premium-feature">
                            <i class="fas fa-music"></i>
                            <div class="feature-text">
                                <h3>高音质</h3>
                                <p>体验高达 320kbps 的音质</p>
                            </div>
                        </div>
                        <div class="premium-feature">
                            <i class="fas fa-forward"></i>
                            <div class="feature-text">
                                <h3>无限跳过</h3>
                                <p>随心所欲切换歌曲</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 订阅计划部分 -->
                <section class="premium-plans-section">
                    <h2 class="section-title">选择你的 Premium 计划</h2>
                    <div class="premium-plans">
                        <!-- 个人会员 -->
                        <div class="premium-plan-card">
                            <div class="plan-header">
                                <div class="plan-name">个人版</div>
                                <div class="plan-cost">¥18</div>
                                <div class="plan-period">/月</div>
                                <div class="plan-description">无广告，随时随地收听</div>
                            </div>
                            <ul class="plan-features-list">
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 无广告打扰</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 高达 320kbps 音质</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 离线收听</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 无限跳过歌曲</li>
                            </ul>
                            <button class="plan-button" data-plan="personal">升级至此方案</button>
                        </div>

                        <!-- 情侣会员 -->
                        <div class="premium-plan-card">
                            <div class="plan-header">
                                <div class="plan-name">情侣版</div>
                                <div class="plan-cost">¥25</div>
                                <div class="plan-period">/月</div>
                                <div class="plan-description">两个Premium账号，共享一个订阅</div>
                            </div>
                            <ul class="plan-features-list">
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 两个Premium账号</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 无广告打扰</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 高达 320kbps 音质</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 独立推荐内容</li>
                            </ul>
                            <button class="plan-button" data-plan="couple">升级至此方案</button>
                        </div>

                        <!-- 家庭会员 -->
                        <div class="premium-plan-card">
                            <div class="plan-header">
                                <div class="plan-name">家庭版</div>
                                <div class="plan-cost">¥35</div>
                                <div class="plan-period">/月</div>
                                <div class="plan-description">最多六个账号，居住在同一地址</div>
                            </div>
                            <ul class="plan-features-list">
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 六个Premium账号</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 无广告打扰</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 家长内容控制</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 共享播放列表</li>
                            </ul>
                            <button class="plan-button" data-plan="family">升级至此方案</button>
                        </div>

                        <!-- 学生会员 -->
                        <div class="premium-plan-card">
                            <div class="plan-header">
                                <div class="plan-name">学生版</div>
                                <div class="plan-cost">¥9</div>
                                <div class="plan-period">/月</div>
                                <div class="plan-description">高校在读学生专享折扣</div>
                            </div>
                            <ul class="plan-features-list">
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 需要验证学生身份</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 无广告打扰</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 高达 320kbps 音质</li>
                                <li class="plan-feature-item"><i class="fas fa-check"></i> 优惠50%的价格</li>
                            </ul>
                            <button class="plan-button" data-plan="student">升级至此方案</button>
                        </div>
                    </div>
                </section>

                <div class="premium-compare">
                    <h2>免费版与 Premium 版对比</h2>
                    <div class="compare-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>功能</th>
                                    <th>免费版</th>
                                    <th>Premium 版</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>无广告打断</td>
                                    <td><i class="fas fa-times"></i></td>
                                    <td><i class="fas fa-check"></i></td>
                                </tr>
                                <tr>
                                    <td>离线收听</td>
                                    <td><i class="fas fa-times"></i></td>
                                    <td><i class="fas fa-check"></i></td>
                                </tr>
                                <tr>
                                    <td>随心所欲跳过歌曲</td>
                                    <td>有限（每小时6次）</td>
                                    <td><i class="fas fa-check"></i> 无限</td>
                                </tr>
                                <tr>
                                    <td>音频质量</td>
                                    <td>标准（128kbps）</td>
                                    <td>超高（320kbps）</td>
                                </tr>
                                <tr>
                                    <td>播放顺序控制</td>
                                    <td>仅随机播放</td>
                                    <td><i class="fas fa-check"></i> 完全控制</td>
                                </tr>
                                <tr>
                                    <td>无流量限制</td>
                                    <td><i class="fas fa-times"></i></td>
                                    <td><i class="fas fa-check"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="premium-faq">
                    <h2>常见问题</h2>
                    <div class="faq-list">
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3>如何支付？</h3>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                <p>我们支持微信支付、支付宝、银联卡等多种支付方式，订阅后每月自动续费，可随时取消。</p>
                            </div>
                        </div>
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3>是否有免费试用？</h3>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                <p>是的，新用户可以享受7天免费试用，体验完整的Premium功能。</p>
                            </div>
                        </div>
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3>如何取消订阅？</h3>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                <p>您可以随时在账号设置中取消订阅，取消后将在当前计费周期结束后停止续费。</p>
                            </div>
                        </div>
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3>我能否在多个设备上使用同一账号？</h3>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                <p>个人账号可同时在多个设备上登录，但一次只能在一台设备上播放。家庭套餐的每个账号可以单独登录并使用。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="premium-cta">
                    <h2>准备好升级了吗？</h2>
                    <p>立即加入超过1亿用户的行列，享受最佳音乐体验</p>
                    <button class="premium-cta-btn">开始使用 Premium</button>
                </div>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image" title="点击查看歌词">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">晴天</h4>
                    <p class="artist-name">周杰伦 - 叶惠美</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/premium.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化公共功能
            if (typeof initCommonFeatures === 'function') {
                initCommonFeatures();
            }
            
            // 初始化底部播放器状态
            if (typeof initPlayerStateSync === 'function') {
                initPlayerStateSync();
            }
        });
    </script>
</body>
</html>